<template>
  <div class="white-box">
    <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px">
      <el-form-item label="客服电话" prop="service_tel">
        <el-input v-model.trim ="formData.service_tel" clearable placeholder="请输入客服电话" oninput="value=value.replace(/[^\d]/g,'')"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" :loading="btnLoading" @click="submitForm(formRef)">确认修改</el-button>
      </el-form-item>
    </el-form>
    <go-back/>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount} from "vue"
import {useRouter, useRoute} from "vue-router"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()

onMounted(() => {
  getDetail()
})
const btnLoading = ref(false)
const formRef = ref(null)
const formData = reactive({
  service_tel:''
})
const list = reactive([])

const formRule = reactive({
  service_tel: [{
    required: true,
    message: "请输入客服电话",
    trigger: "blur"
  },{
    validator: proxy.$util.validPhone,
    trigger: "blur"
  }]
})
const getDetail = () => {
  proxy.$axios
      .get("common/serviceTel")
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          formData.service_tel = result
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
      })
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      let url = "admin/app/service/update"
      btnLoading.value = true
      proxy.$axios
          .post(url,formData)
          .then((res) => {
            btnLoading.value = false
            if (res.data.code == 200) {
              proxy.$message({message: "保存成功！", type: "success"})
            } else {
              proxy.$message({message: res.data.msg, type: "error"})
            }
          })
          .catch((err) => {
            btnLoading.value = false
          })
    }
  })
}
</script>

<style lang="less" scoped>

</style>
